<script lang='ts' setup>
import {ref} from 'vue'
import MenuItemCom from '@/components/MenuItemCom.vue'
import {useRoute} from 'vue-router'
import routes from '@/router'
import {ElMessageBox} from "element-plus";
import {logoutSystem} from "@/utils/user";
import {isMainThread} from 'worker_threads';

const route = useRoute()
const isCollapseMenu = ref(false)
const appRouter = () => {
  return routes.getRoutes().filter((item) => item.meta.appMenuShowItem);
}

function handleLogout() {
  ElMessageBox.confirm('确定退出登录吗？', '提示', {
    type: 'warning',
    confirmButtonText: '确定',
    cancelButtonText: '取消',
  })
      .then(() => {
        logoutSystem()
      }).catch(() => {
  });
}
</script>
<template>
  <div class="pageHeader">
    <div :style="{ 'width': isCollapseMenu ? '70px' : '200px' }" class="logo"></div>
    <div :style="{ 'margin-left': isCollapseMenu ? '70px' : '200px',
      'width': (isCollapseMenu ? 'calc(100vw - 70px)' : 'calc(100vw - 200px)') }"
         class="rightPart">
      <el-icon :class="{ 'is-active': isCollapseMenu, 'menu-expand': true }" size="20"
               @click="isCollapseMenu = !isCollapseMenu">
        <Expand v-if="isCollapseMenu"/> <!-- 折叠按钮 -->
        <Fold v-else/> <!-- 展开按钮 -->
      </el-icon>
      <el-button class="logoutBtn" link style="color: white;" @click="handleLogout">退出登录</el-button>
    </div>
  </div>
  <div :style="{ 'width': isCollapseMenu ? '70px' : '200px' }" class="el-menu-container">
    <el-menu :collapse="isCollapseMenu" :default-active="route.path" router>
      <menu-item-com v-for="item in appRouter()" :collapse="isCollapseMenu" :menuItem="item"/>
    </el-menu>
  </div>
  <div :style="{ 'margin-left': isCollapseMenu ? '70px' : '200px' }" class="pageMain">
    <div class="pageView">
      <router-view></router-view>
    </div>
  </div>
</template>
<style lang='scss' scoped>
.rightPart {
  margin-left: 200px;
  display: flex;
  transition: all 0.3s ease-in-out;
  align-items: center;
  position: relative;
  justify-content: end;
  height: 50px;
  box-sizing: border-box;
  padding: 0 20px;
  color: white;
  z-index: var(--max-index);

  .menu-expand {
    position: absolute;
    left: 20px;
    cursor: pointer;
  }
}

.pageView {
  background-color: white;
  width: 100%;
  height: 100%;
  padding: 20px;
  box-sizing: border-box;
  overflow: auto;
}

.pageMain {
  margin-left: 200px;
  margin-top: 50px;
  height: calc(100vh - 50px);
  background-color: #f1f1f1;
  transition: margin-left 0.3s ease-in-out;
  padding: 10px;
  box-sizing: border-box;
  overflow: auto;
}

.pageHeader {
  height: 50px;
  border-bottom: 1px solid #ccc;
  position: fixed;
  background-color: #429dff;
  top: 0;
  left: 0;
  z-index: var(--max-index);
  width: 100vw;

  .logoutBtn {
    position: absolute;
    right: 20px;
    top: 15px;
  }

  .logo {
    transition: all 0.3s ease-in-out;
    position: absolute;
    left: 0;
    border-right: 1px solid #ccc;
    width: 200px;
    height: 50px;
    line-height: 50px;
    text-align: center;
  }
}

.el-menu-container {
  position: fixed;
  left: 0;
  top: 50px;
  overflow: auto;
  width: 200px;
  height: calc(100vh - 50px);
  background-color: #fff;
  scrollbar-width: thin;
  z-index: var(--max-index);
  transition: all 0.3s ease-in-out;

  :deep(.el-menu) {
    border-right: none !important;
  }
}
</style>